<template>
	<view class="main">
		<view class="fixed" :style="{'z-index':zIndex}">
			<!-- <u-dropdown :border-bottom="true" @open="open" @close="close">
				<u-dropdown-item v-model="zyValue" :title="zyTitle" :options="zylist" @change="changeZy">
				</u-dropdown-item>
				<u-dropdown-item v-model="bjValue" :title="bjTitle" :options="bjlist" @change="changeBj">
				</u-dropdown-item>
			</u-dropdown> -->
			<u-dropdown ref="uDropdown" :border-bottom="true" @open="open" @close="close">
				<u-dropdown-item :title="zyTitle">
					<view class="slot-content" style="background-color: #FFFFFF;">
						<scroll-view scroll-y="true" style="height: 350px;">
							<view class="u-text-left u-content-color u-m-t-50 u-m-b-20 items" v-for="(item,index) in zylist" :key="index" @click="changeZy(item.value)">{{item.label}}</view>
						</scroll-view>
					</view>
				</u-dropdown-item>
				<u-dropdown-item :title="bjTitle">
					<view class="slot-content" style="background-color: #FFFFFF;">
						<scroll-view scroll-y="true" style="height: 350px;">
							<view class="u-text-left u-content-color u-m-t-50 u-m-b-20 items" v-for="(item,index) in bjlist" :key="index" @click="changeBj(item.value)">{{item.label}}</view>
						</scroll-view>
						<!-- <u-button type="primary" @click="closeDropdown">确定</u-button> -->
					</view>
				</u-dropdown-item>
			</u-dropdown>
		</view>
		<view class="box box-tb" v-if="rwlist.length !=0">
			<view class="" style="overflow-y: auto;width:100%;height: 90%;position: absolute;top: 120rpx;left: 0;">
				<view class="box box-align-center box-pack-start bgcfff mb20 padd10" v-for="(item,index) in rwlist"
					:key="index" @click="goDetail(item)">
					<u-avatar :src="item.image" mode="square" size="160"></u-avatar>
					<view class="box box-tb box-align-start box-pack-start ml10 content">
						<view class="posr">
							<view class="title">{{item.title}}</view>
							<!-- <span class="zymcspan" v-if="item.xj !=null && item.bjmc !=null &&item.zymc!=null">{{item.xj+'级'+item.zymc+item.bjmc}}</span> -->
							<view class="tips" v-if="item.wpy !=0">
								未批阅 +{{item.wpy}}
							</view>
						</view>
						<!--                		<view class="limit-time mt10">
                			截止日期：{{item.endTime}}
                		</view> -->
						<view class="progress box box-align-center">
							<u-slider v-model="item.wcl" min="0" max="100" disabled active-color="#626BF1"
								inactive-color="#F3F4FB" block-width="26" height="10" block-color="#626BF1"
								class="sliders">
							</u-slider>
							<view class="ml10 percent box box-align-center">
								<view class="cnt">{{item.wcs}}</view>/{{item.bjrs}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<no-data title="暂无实践任务" v-else></no-data>
	<!-- 	<view class="public" @click="publicl()" style="font-size: 20px;">
			+
		</view> -->
		<u-popup v-model="show" mode="bottom " border-radius="14" height="648rpx" :safe-area-inset-bottom="true">
			<view class="box box-align-center box-pack-between title">
				<view class="">
					发布实践任务
				</view>
			</view>
			<view class="">
				<u-form :model="form" ref="uForm">
					<u-form-item label="学级">
						<view class="item-list box box-align-center box-pack-between">
							<view class="">
								{{form.xj !=''?'选择学级':form.xj}}
							</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</u-form-item>
					<u-form-item label="专业">
						<view class="item-list box box-align-center box-pack-between">
							<view class="">
								{{form.zy !=''?'全部专业':form.zy}}
							</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</u-form-item>
					<u-form-item label="班级">
						<view class="item-list box box-align-center box-pack-between">
							<view class="">
								{{form.bj !=''?'全部班级':form.bj}}
							</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</u-form-item>
				</u-form>
			</view>
			<view class="box box-align-center box-pack-center">
				<view class="flex-1" @click="handleCancel()">
					取消
				</view>
				<view class="flex-2" @click="handleConfirm()">
					确定
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					xj: '',
					xjId: '',
					zy: '',
					zyId: '',
					bj: '',
					bjId: ''
				},
				currSchool: uni.getStorageSync('currSchool'),
				user: uni.getStorageSync("user"),
				plan: {},
				rwlist: [],
				value: 30,
				show: false,
				zylist: [],
				zyValue: '',
				zyTitle: '全部专业',
				bjlist: [{
					label: '全部班级',
					value: ''
				}],
				bjValue: '',
				bjTitle: '全部班级',
				cjList: [],
				zsList: [],
				zIndex: 0
			}
		},
		onShow() {
			this.zyList();
			this.classLdsjList('');
		},
		methods: {
			zyList() {
				this.clearzylist();
				this.$api.post({
					url: '/dzy/listZy'
				}, {
					schoolid: this.currSchool.id
				}).then(res => {
					console.log(res);
					if (res.code == 0) {
						this.zyTitle = res.list[0].label
						this.zyValue = res.list[0].value
						this.zylist = res.list
						this.bjList(res.list[0].value)
						this.changeZy(res.list[0].value)
					}

					// for (let i = 0; i < res.list.length; i++) {
					// 	this.zylist.push(res.list[i]);
					// };
				})
			},
			bjList(zy) {
				this.clearbjlist();
				this.$api.post({
					url: '/dclass/listBj'
				}, {
					schoolid: this.currSchool.id,
					zydm: zy.value
				}).then(res => {
					if (res.code == 0) {
						this.bjTitle = res.list[0].label
						this.bjValue = res.list[0].value
						this.bjlist = res.list
						this.classLdsjList()
					}
					// if(res.list.length!=0){
					// 	for (let i = 0; i < res.list.length; i++) {
					// 		this.bjlist.push(res.list[i]);
					// 	}
					// }
				})
			},
			classLdsjList() {
				this.$api.post({
					url: '/yclassldsjtask/schoolLdsjList'
				}, {
					schoolid: this.currSchool.id,
					zydm: this.zyValue,
					classid: this.bjValue
				}).then(res => {
					console.log(res);
					// this.plan = res.plan;
					this.rwlist = res.list;
				})
			},
			goDetail(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pageHome/sjDetail?id=' + item.ldsjid + '&planid=' + item.sjlistid + '&classid=' + item
						.classid
				})
			},
			publicl() {
				wx.vibrateShort();
				uni.navigateTo({
					url: "/team/kc/pubSjTask"
				})
			},
			changeZy(e) {
				console.log(e);
				// if (e != '') {
				this.zyValue = e;
				this.zylist.forEach((item, index) => {
					console.log(item);
					if (e == item.value) {
						this.zyTitle = item.label;
						this.bjList(item);
					}
				})
				// } else {
				// 	this.zyTitle = '全部专业';
				// 	this.zyValue = '';
				// }
				this.classLdsjList();
				this.$refs.uDropdown.close();
			},
			changeBj(e) {
				console.log(e);
				let params = {id:e}
				uni.setStorageSync('clazz',params)
				// if (e != '') {
				// 	let _this = this;
				this.bjValue = e;
				this.bjlist.forEach((item, index) => {
					if (e == item.value) {
						this.bjTitle = item.label;
					}
				})
				// } else {
				// 	this.bjTitle = '全部班级';
				// 	this.bjValue = '';
				// }
				this.classLdsjList();
				this.$refs.uDropdown.close();
			},
			open() {
				this.zIndex = 100000000
				this.$refs.uDropdown.highlight();
			},
			close(index) {
				this.zIndex = 0
				this.$refs.uDropdown.highlight(index);
			},
			clearzylist() {
				this.zylist = [{
					label: '全部专业',
					value: ''
				}];
				this.zyValue = '';
				this.zyTitle = '全部专业';
			},
			clearbjlist() {
				this.bjlist = [{
					label: '全部班级',
					value: ''
				}];
				this.bjValue = '';
				this.bjTitle = '全部班级';
			}

		}
	}
</script>

<style scoped lang="scss">
	.public {
		position: fixed;
		right: 52rpx;
		bottom: 38rpx;
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-radius: 50%;
		background: linear-gradient(180deg, #7686F6, #626BF1);
		box-shadow: 0px 2rpx 10rpx 0px #DADCE8;
		font-size: 28rpx;
		color: #fff;
	}

	.fixed {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		background: #fff;
	}

	.main {
		width: 100%;
		height: 100%;
	}

	.bgcfff {
		background-color: #fff;
		box-sizing: border-box;
	}

	.posr {
		width: 100%;
		position: relative;
		font-size: 32rpx;
		font-weight: 600;

		.tips {
			position: absolute;
			top: -21rpx;
			right: 0;
			width: 140rpx;
			height: 40rpx;
			line-height: 40rpx;
			background: #FF5A77;
			border-radius: 26rpx;
			font-size: 20rpx;
			text-align: center;
			color: #fff;
		}
	}

	.limit-time {
		color: #5F6572;
		font-size: 22rpx;
	}

	.progress {
		margin-top: 20rpx;
		width: 80%;
	}

	.sliders {
		width: 80%;
	}

	.content {
		width: 500rpx;
	}

	.percent {
		font-size: 25rpx;
	}

	.cnt {
		color: #7686F6;
	}

	.title {
		width: 400rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		// padding: 0 40rpx;
		// height: 128rpx;
		// line-height: 128rpx;
		// border-bottom: 2rpx solid #EEF4F8;
		// font-size: 26rpx;
		// color: #959AA5;

		.edit-score {
			color: #FF5A77;
		}
	}

	.flex-1,
	.flex-2 {
		flex: 1;
		text-align: center;
		height: 112rpx;
		line-height: 112rpx;
		font-size: 28rpx;
		background: #F8F9FC;
		color: #1C1C1C;
		font-weight: bold;
	}

	.flex-2 {
		color: #626BF1;
	}

	.item-list {
		padding: 5rpx 30rpx;
		width: 500rpx;
		height: 72rpx;
		background: #F8F9FC;
		border-radius: 8rpx;
		color: #AEB8CF;
		font-size: 28rpx;
	}

	.zymcspan {
		font-size: 12px;
		color: gray;
		position: absolute;
		right: 0;
	}
	.items{
		padding: 0 20px;
	}
</style>
